import dva from 'dva';
import './index.css';

// 1. Initialize 初始化
// const app = dva();

// 添加一些列表数据
const app = dva({
  initialState: {
    products: [
      { name: '我是dva', id: 1, key: 1 },
      { name: '我是antd', id: 2, key: 2 },
    ],
  },
});

// 2. Plugins 插件
// app.use({});

// 3. Model
// app.model(require('./models/example').default);
app.model(require('./models/products').default);

// 4. Router 注册路由
app.router(require('./router').default);

// 5. Start 启动
app.start('#root');


// 1.使用 antd
// babel-plugin-import 用来按需加载 antd 的脚本和样式
// 编辑 .webpackrc，使 babel-plugin-import 插件生效。

// 2.定义路由
// 第一步是创建路由，路由可以想象成是组成应用的不同页面,新建 route component routes/Products.js
// 添加路由信息到路由表，编辑 router.js
// 然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的 <h2> 标签

// 3.编写可复用的 UI Component
// 随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 dva 里你可以把这部分抽成 component
// 新建 components/ProductList.js 文件

// 4.定义 Model
// 完成 UI 后，现在开始处理数据和逻辑。
// dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions
// 新建 model models/products.js
// 这个 model 里：
//  namespace 表示在全局 state 上的 key
//  state 是初始值，在这里是空数组
//  reducers 等同于 redux 里的 reducer，接收 action，同步更新 state
// 然后别忘记在 index.js 里载入他

// 5.connect 起来
// 到这里，我们已经单独完成了 model 和 component，接下来串联这些组件
// dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。
// 编辑 routes/Products.js，替换为以下内容
// 最后，我们还需要一些初始数据让这个应用 run 起来。编辑 index.js